import  styled from 'styled-components'
import { Link } from 'react-router-dom'
require('../assets/icons/home.svg') 
require('../assets/icons/statistics.svg')
require('../assets/icons/todolist.svg')


const NavWrapper=styled.nav`
  line-height:24px;
  box-shadow:0 0 3px rgba(0,0,0,0.2);
  >ul{
    display:flex;
    >li{
      width:33.3%;
      text-align:center;
      padding:16px;
      display:flex;
      justify-content: center;
      >.icon{
        width:1.5em;
        height:1.5em;
        margin-right:5px
      }
    }
  }
  
`

const Nav =()=>{
    return(
        <NavWrapper>
            <ul>
                <li>
                  <svg  className="icon" >
                    <use xlinkHref="#home" />
                  </svg>
                  <Link to="/">主页</Link>
                </li>
                <li>
                  <svg  className="icon" >
                    <use xlinkHref="#todolist" />
                  </svg>
                  <Link to="/todolist">待办</Link>
                </li>
                <li>
                    <svg className="icon" >
                      <use xlinkHref="#statistics" />
                    </svg>
                    <Link to="/statistics">统计</Link>
                </li>
            </ul>
       </NavWrapper>
    )
}
export default Nav;